import React, {useEffect, useState} from 'react'
import {reqNewMusic, reqSong} from '../api/api'
import {useNavigate} from 'react-router-dom'

export default function Program () {
  const navigate = useNavigate()
  const [NewSong,setNewSong] =useState([])
  useEffect(()=>{
    const Music = async ()=>{
      let  result =  await reqNewMusic({
        limit: 10
      })
      setNewSong(result.data.result)
      console.log(NewSong)
    }
    Music()
  },[])
  const GoMusic = async (item) => {
    let result = await reqSong(item.id)
    let url  =  result.data.data[0].url
    const play =
        {
          title: item.name,
          artist: item.name,
          audioSrc: url,
          image: item.picUrl,
          color: "#00aeb0"
        }
    navigate('/musicpiay',{state:{play}})
  }
  return (
    <div>
      <div className="recommend">
        <h2>精彩节目推荐</h2>
        <ul>
          {
            NewSong.map(item=>(<li key={item.id}>
              <a href="#">
                <span className="left"><img src={item.picUrl} onClick={()=>GoMusic(item)} /></span>
                <span className="left">
                <p>{item.name}</p>
              </span>
              </a>
            </li>))
          }

        </ul>
      </div>
    </div>
  )
}
